import React, { Fragment } from "react";
import { Row, Col } from "antd";
// import styles from "./PlaceOrder.module.scss";
import { MainLayout } from "../../layouts/mainLayout/MainLayout";
import { placeOrder } from "../../redux/order/orderSlice";
import { useDispatch } from "react-redux";
import { useSelector } from "../../redux/hooks";
import { CheckOutCard, PaymentForm } from "../../components";
const PlaceOrder: React.FC = () => {
  const jwt = useSelector((s) => s.user.token) as string;
  const loading = useSelector((s) => s.orderSlice.loading);
  const currentOrder = useSelector((s) => s.orderSlice.currentOrder);
  const dispatch = useDispatch();
  // 去支付
  const onHandlePay = () => {
    if (jwt) {
      dispatch(placeOrder({ jwt, orderId: currentOrder.id }));
    }
  };
  return (
    <Fragment>
      <MainLayout>
        <Row>
          <Col span={12}>
            <PaymentForm />
          </Col>
          <Col span={12}>
            <CheckOutCard
              onCheckout={onHandlePay}
              loading={loading}
              order={currentOrder}
            />
          </Col>
        </Row>
      </MainLayout>
    </Fragment>
  );
};

export default PlaceOrder;
